<template>
	<view>
		<view class="list">
			<view class="col" v-for="item,index in list" :key="item.id">
				<view class="item">
					<view class="title">
						<view class="type" v-if="item.type === `single`">单选题：</view>
						<view class="type" v-if="item.type === `multiple`">多选题：</view>
						<view class="type" v-if="item.type === `boolean`">判断题：</view>
						<view class="question">
							{{item.topic}}
						</view>
					</view>
					<!-- <textarea placeholder="写答案......"></textarea> -->
					<view class="options" v-if="item.type === `single` || item.type === `boolean`">
						<radio-group @change="(e) => radioChange(e, index)" v-model="item.userKey">
							<label class="uni-list-cell uni-list-cell-pd" v-for="(option, index2) in item.options_list" :key="index2">
								<view class="val">
									<radio :value="option.value" />
								</view>
								<view class="option">{{option.label}}</view>
							</label>
						</radio-group>
					</view>
					<view class="options" v-if="item.type === `multiple`">
						<checkbox-group @change="(e) => checkboxChange(e, index)" v-model="item.userKey">
						  <label class="uni-list-cell uni-list-cell-pd" v-for="(option, index2) in item.options_list" :key="index2">
							<view class="val">
								<checkbox :value="option.value" activeBackgroundColor="#2979ff" activeBorderColor="#2979ff" iconColor="#fff" bor />
							</view>
							<view class="option">{{option.label}}</view>
						  </label>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
		<view class="submit" @click="submit">
			<text>提交</text>
		</view>
		<view class="seat">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				this.$post("/exam/questions").then(res => {
					this.list = res.data

				})
			},
			
			radioChange(e,index){
				// console.log(`第 ${index + 1} 题选中值：`, e.target.value);
				this.list.forEach((item,index2)=>{
					if(index2 == index)
					{
						item.userKey = e.target.value
					}
				})
				
			},
			checkboxChange(e,index){
				// console.log(`第 ${index + 1} 题选中值：`, e.target.value);
				this.list.forEach((item,index2)=>{
					if(index2 == index)
					{
						item.userKey = e.target.value
					}
				})
			},
			submit(){
				console.log(this.list)
				let checkRt = true
				let errMsg = ''
				let num = 1
				let scoreTotal = 0
				for (const item of this.list) {
					if(item.userKey === null)
					{
						checkRt = false
						errMsg = `请完成第 `+num+` 题`
						break
					}
					if(item.type === "single")
					{
						if(item.userKey === item.result)
						{
							scoreTotal += item.score
						}
					}else if(item.type === "multiple")
					{
						
						if(item.userKey.join(',') === item.result)
						{
							scoreTotal += item.score
						}
					}
					num++
				}
				
				if(!checkRt)
				{
					this.$toast(errMsg)
					return false
				}
				
				this.$post("/exam/submit",{info:JSON.stringify(this.list),score:scoreTotal}).then(res => {
					this.list = res.data
					if(res.code == 200)
					{
						this.$toast("恭喜您！答题获得"+scoreTotal+"积分")
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}else{
						this.$toast("提交失败")
					}
					
						
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 30rpx;

		.col {
			padding: 20rpx 0;
			border-bottom: 2rpx solid #ddd;
		}

		.title {
			display: flex;

			.type {
				font-weight: bold;
				font-size: 36rpx;
				color: #ffbf6b;
				white-space: nowrap;
			}
		}
		.options{
			margin-top: 30rpx;
			.uni-list-cell{
				display: flex;
				height: 100rpx;
				.val{
					width: 100rpx;
				}
				.option{
					width: 300rpx;
				}
			}
		
		}
	}
	.submit {
		position: fixed;
		background-color: #eee;
		left: 50%;
		bottom: 30rpx;
		line-height: 90rpx;
		width: 240rpx;
		text-align: center;
		background-color: #51c76c;
		color: #fff;
		transform: translateX(-50%);
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.seat {
		height: 150rpx;
	}
</style>